/*
 * @Description:
 * @Autor: lcz
 * @Date: 2022-06-13 15:43:32
 * @LastEditors: lcz
 * @LastEditTime: 2022-06-15 19:21:59
 */
import { ReactNode, CSSProperties, useState, useRef, useEffect } from 'react'
import { Affix } from 'antd'

export interface AffixProps {
  children: ReactNode
  bottom?: string
  class?: string
  style?: CSSProperties
  tabIndex?: number
  offsetBottom?: number
  offsetTop?: number
  target?: string
  onChange?: any
}

const AffixComponent = (props: AffixProps) => {
  const [target, setTarget] = useState<HTMLElement | null>(null)
  const ref = useRef<any>()
  useEffect(() => {
    setTarget(ref.current.closest('.mx-scrollcontainer-wrapper'))
  }, [])
  return (
    <div className={props.class} tabIndex={props.tabIndex} style={props.style} ref={ref}>
      <Affix
        onChange={props.onChange}
        target={() => target}
        offsetTop={props.offsetTop}
        offsetBottom={props.offsetBottom}
      >
        {props.children}
      </Affix>
    </div>
  )
}

export default AffixComponent
